<template>
  <div class="UserCenter">
    <div class="container">
      <el-tabs
        :tab-position="tabPosition"
        style="min-height: 200px"
        :stretch="true"
        v-model="firstActiveName"
        >
        <el-tab-pane label="我的主页" name="first"  >
          <h2>个人信息</h2>
          <ul class="userInforBox">
            <li class="firstList">
              <span>昵称</span
              ><span class="modify" @click="dialogNickName = true">修改</span>
              <p>{{userInfo.nickname}}</p>
            </li>
            <li>
              <span>手机号</span
              ><span class="modify" @click="dialogPhoneNumber = true"
                >修改</span
              >
              <p>{{userInfo.mobile}}</p>
            </li>
            <li>
              <span>密码</span><span class="modify">修改</span>
              <p>*******</p>
            </li>
            <li>
              <p>
                <img
                  :src="userInfo.avatarUrl"
                  alt=""
                />
              </p>
              <el-button icon="el-icon-download" @click="replaceAvatar"
                >更换头像</el-button
              >
              <input
                type="file"
                ref="chooseFile"
                style="display: none"
                @input="modifyActvar"
              />
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="我的课程" name="second" >
          <el-tabs v-model="studyActiveName" >
            <el-tab-pane label="正在学习" name="first">
              <SearchRanderList :renderList='myStudyList' v-if="myStudyList"></SearchRanderList>

              <NoData v-else></NoData>
            </el-tab-pane>
            <el-tab-pane label="我的收藏" name="second">
               <NoData></NoData>
              
            </el-tab-pane>
            <el-tab-pane label="我的报名" name="third">
            <NoData></NoData>
            </el-tab-pane>
            <el-tab-pane label="观看记录" name="fourth">
             
              <NoData></NoData>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
        <el-tab-pane label="我的订单" name="third">
          <el-tabs v-model="activeName">
            <el-tab-pane label="全部订单" name="first">
              <NoData></NoData>
            </el-tab-pane>
            <el-tab-pane label="等待付款" name="second">
             
              <NoData></NoData>
            </el-tab-pane>
            <el-tab-pane label="付款成功" name="third">
              
              <NoData></NoData>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog title="修改昵称" :visible.sync="dialogNickName">
      <el-input placeholder="请输入新昵称" v-model="input" clearable>
      </el-input>
       <div class="determine">
        <el-button @click="dialogNickName=false" >取消</el-button>
        <el-button type="success" @click="toModifyNickName">确定</el-button>
      </div>
    </el-dialog>
    <!-- 修改手机号弹出框 -->
    <el-dialog title="修改手机号" :visible.sync="dialogPhoneNumber">
      <div class="modifyPhoneNumber">
        <el-input placeholder="请输入新手机号!" v-model="phoneNumber" clearable>
        </el-input>
        <el-input placeholder="请输入验证码" clearable v-model="phoneCode">
        </el-input>
        <el-button type="success" @click="toPhoneCode" class="getCodeBtn">获取验证码</el-button>
      </div>
      <div class="determine">
        <el-button @click.prevent="dialogPhoneNumber = false">取消</el-button>
        <el-button type="success" @click="toModifyUserPhone">确定</el-button>
      </div>
    </el-dialog>
    <div class="bottomGrey"></div>
  </div>
</template>

<script>
import {
  getModifyAvatar,
  getModifyUserPhone,
  getModifyUserPhoneCode,
  getModifyNickName,
  getMyCourse
} from "../../../api/userCenter-api";
import NoData from './NoData'
import {mapState} from 'vuex'
import SearchRanderList from '../../search/components/SearchRanderList' 

export default {
  name: "UserCenter",
  data() {
    return {
      tabPosition: "left",
      dialogNickName: false,
      dialogPhoneNumber: false,
      input: "",
      activeName: "first",
      phoneNumber: "",
      phoneCode: "",
      firstActiveName:'first',
      pageNumber:null,
      studyActiveName:'first',
      myStudyList:null,
    };
  },
  methods: {
    replaceAvatar() {
      this.$refs.chooseFile.click();
    },
    modifyActvar(e) {
      getModifyAvatar(e.target.files[0]).then((res) => {
        this.$store.commit('modifyUserInfo',{userInfo:res.userInfo})
      });
    },
    // 获取手机验证码
    toPhoneCode() {
      getModifyUserPhoneCode(this.phoneNumber).then((res) => {
       if(res.code!=0){
          this.$message({
              showClose: true,
              message: `${res.msg}`,
              type: "error",
            });
        }
      });
    },
    // 获取手机接口
    toModifyUserPhone() {
      getModifyUserPhone(this.phoneNumber, this.phoneCode).then((res) => {
        if (res.code === 0) {
          this.$message({
            message: res.msg,
            type: "success",
          });
          this.dialogPhoneNumber = false;
        } else {
          this.$message({
            message: "手机号/验证码不正确",
            type: "warning",
          });
        }
      });
    },
    toModifyNickName(){
      getModifyNickName(this.input).then(res=>{
        if(res.code===0){
           this.$message({
            message: res.msg,
            type: "success",
          });
          this.dialogNickName=false
          console.log(res)
          this.$store.commit("modifyUserInfo",{userInfo:res.userInfo})
        }else{
            this.$message({
            message: res.msg,
            type: "warning",
          });
        }
      })
    }
  },
  computed: {
    ...mapState(['userInfo','pageNum']),
  },
  created () {
      // 用的vuex传值,当页面query.id发生变化时,页面发生变化
         if(this.pageNum==1){
          this.firstActiveName='first'
        }else if(this.pageNum==2){
          this.firstActiveName="second"
        }else{
          this.firstActiveName="third"
        }
        getMyCourse().then(res=>{
          console.log(res)
          this.myStudyList=res.myStudyList
        })
  },
  watch: {
    pageNum(){
        if(this.pageNum==1){
          this.firstActiveName='first'
        }else if(this.pageNum==2){
          this.firstActiveName="second"
        }else{
          this.firstActiveName="third"
        }
    }
  },
  components: {
    NoData,
    SearchRanderList
  }
};
</script>

<style scoped lang="less">
.UserCenter {
  background-color: #f4f4f4;
  padding-top: 1px;
  min-height: 411px;
  ul {
    list-style: none;
    li {
      padding-bottom: 30px;
      font-size: 20px;
      padding-top: 30px;
      p {
        padding: 10px 0;
      }
      span {
        padding: 10px 5px;
        padding-left: 0;
      }
      .modify {
        font-size: 16px;
        color: #00cf8c;
        cursor: pointer;
      }
      img {
        width: 200px;
        height: 200px;
      }
    }
  }
  /deep/.el-tabs__item.is-active {
    color: #00cf8c;
  }
  /deep/ .el-tabs__item:hover {
    color: #00cf8c;
  }
  /deep/.el-tabs__active-bar {
    background-color: #00cf8c;
  }
  .userInforBox {
    padding: 30px 0 0 30px;
  }
  /deep/.el-button:focus,
  .el-button:hover {
    color: #00cf8c;
    background-color: #fff;
    border: 1px solid #00cf8c;
  }
  .modifyPhoneNumber {
    border-top: 1px solid rgb(207, 205, 205);
    border-bottom: 1px solid rgb(207, 205, 205);
    /deep/.el-input--suffix .el-input__inner {
      padding-right: 30px;
      margin: 15px 0 10px 0;
    }
  }
  .determine {
    margin-top: 20px;
    padding-left: 560px;
  }
  /deep/ .el-tabs__nav .is-left {
    height: 60px;
  }
}
.container {
  width: 1200px;
  margin: auto;
  margin-top: 20px;
  background-color: white;
}
li + li {
  border-top: 1px solid #ddd;
}
.noData {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  div {
    width: 100%;
    text-align: center;
    padding-bottom: 15px;
    i {
      font-size: 90px;
      color: #999;
    }
  }
  p {
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
  }
  
}
.getCodeBtn{
  margin-bottom: 20px;
}
.bottomGrey{
  height: 20px;
  background-color: #f4f4f4;
}
</style>